html,
body,
.wrap {
	width: 100%;
	height: 100%;
}

.first {
	width: 100%;
	height: 100%;
	background: url('../img/x7.png') no-repeat;
	background-size: 100% 100%;
	/*display: none;*/
}

.ft img {
	width: 40%;
	opacity: 0.9;
	position: absolute;
	left: 5%;
	top: 1%;
}

.fm .chllange {
	width: 100%;
	position: absolute;
	left: 3%;
	top: 5%;
	animation-duration: 2s;
}

.fm .win {
	width: 55%;
	position: absolute;
	left: 37%;
	top: 24%;
}

.fm .font {
	width: 65%;
	position: absolute;
	left: 25%;
	top: 32%;
	animation-duration: 2s;
}

.fb .go {
	width: 90%;
	position: absolute;
	bottom: 20%;
	left: 5%;
	animation-duration: 4s;
}

.fb .rule {
	width: 22%;
	position: absolute;
	bottom: 16%;
	left: 41%;
	animation-delay: 3s;
	animation-duration: 4s;
}

.show {
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

.guize {
	width: 80%;
	position: absolute;
	top: 15%;
	left: 10%;
}

.cha {
	width: 10%;
	position: absolute;
	top: 26%;
	right: 6%;
}

.xize {
	width: 80%;
	position: absolute;
	top: 35%;
	right: 10%;
}

.second {
	width: 100%;
	height: 100%;
	background: url('../img/3_bg.png') no-repeat;
	background-size: 100% 100%;
	display: none;
}

.st {
	width: 40%;
	opacity: 0.9;
	position: absolute;
	left: 5%;
	top: 1%;
}

.sm {
	width: 80%;
	position: absolute;
	bottom: 40%;
	left: 10%;
	animation-duration: 4s;
}

.third {
	width: 100%;
	height: 100%;
	display: none;
}

.times {
	position: absolute;
	top: 6.5%;
	left: 21%;
	color: white;
	font-size: 20px;
}

.ready {
	width: 40%;
	position: absolute;
	top: 40%;
	left: 30%;
}

.deng1,
.deng2,
.deng3,
.deng4 {
	width: 20%;
	position: absolute;
	top: 10%;
	left: 40%;
}

.deng2,
.deng3,
.deng4 {
	display: none;
}

.four {
	width: 100%;
	height: 100%;
	background-image: url('../img/5_bg.png');
	background-size: 100% 100%;
	display: none;
}

.again {
	width: 90%;
	position: absolute;
	top: 65%;
	left: 5%;
}

.paihang {
	width: 90%;
	position: absolute;
	top: 75%;
	left: 5%;
}

.bang {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 10;
}

.pai {
	width: 80%;
	position: absolute;
	top: 10%;
	left: 10%;
}

.cha2 {
	width: 10%;
	position: absolute;
	top: 20%;
	right: 6%;
}

.five {
	display: none;
	width: 100%;
	height: 100%;
	background-image: url('../img/5_over.jpg');
	background-size: 100% 100%;
}

.welcome {
	width: 80%;
	position: absolute;
	top: 68%;
	left: 10%;
}

.p1 {
	color: white;
	font-size: 18px;
	position: absolute;
	top: 37%;
	left: 25%;
}

.p2 {
	color: white;
	font-size: 18px;
	position: absolute;
	top: 41%;
	left: 29%;
}

.six {
	display: none;
	width: 100%;
	height: 100%;
	background-image: url('../img/13_bg.jpg');
	background-size: 100% 100%;
	/*transform-style: preserve-3d;*/
}
.zhuan{
	width: 80%;
	position: absolute;
	top: 20%;
	left: 10%;
}
#t_way {
	width: 80%;
	height: 45%;
	background-color: rgba(0, 0, 0, 0);
	border-radius: 50%;
	/*-webkit-transform: rotate(0deg);*/
	position: absolute;
	left: 10%;
	top: 20%;
}
#t_car {
	position: absolute;
	top: 63%;
	left: -2%;
	width: 22%;
}
#t_btn {
	width: 20%;
	height: 20%;
	position: absolute;
	top: 45%;
	left: 45%;
	z-index: 1;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}

#t_btn img {
	position: absolute;
	top: -16%;
	left: 30%;
	width: 50%;
}
.seven{
	display: none;
	width: 100%;
	height: 100%;
	background-image: url("../img/14_bg.jpg");
	background-size: 100% 100%;
}
.imgs{
	width: 40%;
	position: absolute;
	top: 40%;
	left: 30%;
}
.seven_two{
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	position: absolute;
	z-index: 10;
}
.sorry{
	width: 40%;
	position: absolute;
	top: 10%;
	left: 30%;
}
.ago{
	width: 80%;
	position: absolute;
	top: 50%;
	left: 10%;
}
























